<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 实例 + 生命周期</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>{{msg}}</h3>
        <p>a --- {{a}}</p>
        <p>b==={{b}}</p>
        <h3 ref="one">txt -- {{txt}}</h3>
        <p>count -- {{count}}</p>
        <button v-on:click="a++">a ++ {{a}}</button>
        <button @click="teardown">摧毁组件</button>
    </div>
</body>
<script>
    var data = {
        msg: "Vue 实例 + 生命周期",
        a: 100,
        b: 2000,
        txt: '当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统'
    }
    var count = 1;
    const vm = new Vue({
        //el: "#app",
        data: data,
        methods: {
            log(msg) {
                console.log(`## ${++count} --- ${msg}`);
            },
            teardown() {
                vm.$destroy()
            }
        },
        beforeCreate() {
            console.log(this.count);
            console.log(`## ${1} ---beforeCreate 实例开始创建`);
        },
        created() {
            this.log('created 实例已经创建完毕')
        },
        beforeMount() {
            console.log(this.$refs);
            this.log("beforeMount - 实例开始载入")
        },
        mounted() {
            // this.$refs.one.style.color = "red" //mounted 才能取到真实DOM
        },
        beforeUpdate() {
            this.log('beforeUpdate - 实例开始更新数据')
        },
        updated() {
            this.log('updated - 实例更新数据完毕')
        },
        beforeDestroy() {
            this.log('beforeDestroy -- 实例开始被销毁')
        },
        destroyed() {
            this.log('destroyed -- 实例开始被销毁完毕')
        }
    }).$mount("#app") //实例载入到 app DOM 内
</script>

</html>
<!-- 
        每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
        设计模式  (工厂模式  单例模式  混合模式  观察者模式  发布订阅模式 )
        MVVM  M  model 数据模型  V  view 视图界面  VM  viewmodel 视图和数据混淆在一起对象 
        MVC   M  model 数据模型  V  view 视图界面  C   controller 控制器 (JS逻辑 方法和事件)
        MVP   M  model 数据模型  V  view 视图界面  P   Prestener  复杂逻辑   
        选项对象  
        选项对象属性 (data el  methods name) 
        vm 
        实例对象  vm 
        实例属性  vm.$data  vm.$el  
        实例方法 / 数据    vm.$watch     vm.$set
        实例方法 / 事件   vm.$emit     vm.$on    
        实例方法 / 生命周期   vm.$nextTick  vm.$mount()   vm.$forceUpdate (强制刷新页面)
        el  vue挂载元素  $mount("#app") 
        data 对象 
        响应式系统  (只要检测到数据更新,就一定会去修改视图 )    组件系统 
        1. 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中
        2. 当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值 (响应式)

        vm 实例化后赋值  没有意义  没有被响应式视图系统监听

        所有需要用到的数据都必须在data 里面初始化 否则没有响应式监听 
        借鉴 MVVM

        VM 实例对象  
        实例属性 
        vm.$el     
        vm.$data    
        实例方法  
        vm.$watch  监听数据改变
        vm.$set    修改对象和数据刷新视图
        vm.$delete  删除对象和数组 刷新视图   



        ref  用来记录真实DOM  this.$refs 
        a. ref 用于标签 表示这个真实DOM 对象
        b. ref 用于组件 表示这个组件对象 

        window.onLoad = function(){}
        document.ready = function(){}

        实例生命周期钩子 
        每个 Vue 实例在被创建时都要经过一系列的过程
        (实例创建  实例载入  实例更新  实例销毁 )
        这些过程称为 实例生命周期   Vue 会在这个每个周期设置对应的函数去监听  这些函数就叫  生命周期钩子函数
        Vue 内置一些生命周期钩子函数(function )   给了开发者在不同阶段添加自己的代码的机会

        实例创建   beforeCreate   created   1       实例初始化创建 
        实例载入   beforeMount    mounted   1       初始化载入
        实例更新   beforeUpdate   updated   n       实例 里面  data  数据改变 
        实例销毁   beforeDestroy  destroyed  1      实例被移除 
        
        activated   激活
        deactivated 失活  
        errorCaptured  错误捕获 


        真实DOM  ref 
        Vue  创建实例之前 DOM树 先读取根元素 你们所有的dom数据标签  然后以  树形结构 把dom数据存储在内存 (模板存储DOM)
        然后 给这些 在内存中 描述 dom节点 的 数据信息  叫做 虚拟DOM 
        抽象定义 
        虚拟DOM  Virtual DOM   (性能优化)    
        
        优势  提升性能 提高加载速度 
        缺点  多了一次 虚拟DOM 初始化的计算 (尽量第一次不要加载过多的数据 )

        数据更新 patch  diff算法  比较不同 

        如果每次data 改变 也就是数据更新  
        Vue (核心DIfferent 算法) 监测到数据改变  自动生成 新的虚拟DOM  

        会去和 旧的虚拟DOM 进行对比  得到变更的部分 patch 
        然后会把这 patch 放到一个队列  最终批量更新  渲染成真实DOM  

        
     -->